<template>
    <div id="app">
        <video  muted="muted" src="../../assets/by.mp4" loop="loop" autoplay="autoplay" class="video"></video>
        <div class="em">
        <h1>{{pageInfo.title}}</h1>
       <!-- 动态组件 -->
       <component :is="pageInfo.component"></component>
            <div class="toggle">
                <svg class="icon" aria-hidden="true">
                    <use 
                    :xlink:href="icon"></use>
                </svg>
                <b @click="handleToggle">{{pageInfo.toggleDes}}</b>
            </div>
        </div>
    </div>
    
  </template>

<script setup>
import { ref,watchEffect,markRaw,computed} from 'vue';
import commonLogin from './commonLogin.vue';
import smsLogin from "./smsLogin.vue"




let pageInfo = ref({
    title:'海贼真爱粉',
    loginType:'common',
    toggleDes:'切换成王的机会',
    component:markRaw(commonLogin)
})

let isCommonLogin = ref(true);

let handleToggle = ()=>{
    isCommonLogin.value = !isCommonLogin.value
}




watchEffect(() =>{
    if(isCommonLogin.value){
        pageInfo.value = {
            title:'海贼真爱粉',
            loginType:'common',
            toggleDes:'切换成王的机会',
            component:markRaw(commonLogin)
}
    }else {
        pageInfo.value = {
            title:'海贼铁粉',
            loginType:'sms',
            toggleDes:'成王的机会',
            component:markRaw(smsLogin)
}
    }
})

let icon = computed(()=>{
    return isCommonLogin.value ? '#icon-iphone' : '#icon-icon-test'
})



</script>
<style lang="scss" scoped>
#app{
    height: 100%;
}
.video{
    width: 100%;
//    height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   position: fixed;
}
.em{
    width: 400px;
    height: 500px;
    background-color: rgb(0, 0, 0,0.3);
    position: fixed;
    top: 300px;
    right: 200px;
}
h1{
    color: red;
    text-align:center;
    padding: 80px 0px 60px 0px
    
    
}
// 定制组件，修改样式的思路
// 1.找到对应组件结构的类名
// 2.重新编写样式，覆盖原来的样式

// 样式修改不成功的因素和解决方案

// 1.确认类名是否正确

// 2.确认权重是否足够 ！important

// 3.是否需要使用深度选择器 xx :deep(选择器) scoped样式，层级嵌套比较深的时候
    .username-for-item{
        .el-input{
            width: 200px !important;
            :deep(.el-input__inner){
                color: blue;
            }
        }
    }
    .password-for-item{
        .el-input{
            width: 200px !important;
            :deep(.el-input__inner){
                color: red;
            }
        }
    }
    .captcha-for-item{
        .el-input{
            width: 200px !important;
            :deep(el-input__wrapper){
                box-shadow: none;
            }
            :deep(.el-input__inner){
                color: green;
                
            }
        }

    }

</style>



  
